<template>
    <div class="main">
        <div class="top_div">
            <div class="top_name">{{conversationName}}</div>
        </div>
        <div class="cent_div_scoll" >
            <div class="cent_div" >
                <div v-for="(item, index) in chatInfoList" :key="index" class="text_list"  >
                    <div class="cent_div_item">
                        <el-row :gutter="20" v-show="item.isChatShowPeople" class="chat_content_p">
                            <el-col :span="16">
                                <div class="chat_content_left">
                                    <img :src="peopleAvatar" class="img_avr" @error="handleImageError"/> 
                                    <div class="chat_content_left_text">{{item.peopleText}}</div>
                                    <!-- <img src="@/assets/avr.png" class="img_content"/>  -->
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="chat_content_right"></div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" v-show="item.isChatShowCurr" class="chat_content_curr">
                            <el-col :span="8">
                                <div class="chat_content_curr_left"></div>
                            </el-col>
                            <el-col :span="16">
                                <div class="chat_content_curr_right">
                                    <!-- <img src="@/assets/avr.png" class="img_content_right"/>  -->
                                    <div class="chat_content_right_text">{{item.myText}}</div>
                                    <img :src="myAvatar" class="img_avr"/>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>
            
        <div class="bom_div">
            <div class="bom_div_btn">
                <el-icon :size="25" class="bom_expression_btn">
                    <Picture />
                </el-icon>
                <el-icon :size="25" class="bom_image_btn">
                    <Folder />
                </el-icon>
                <el-icon :size="25" class="bom_cut_btn">
                    <ChatDotRound />
                </el-icon>
            </div>
            <div class="bom_div_cent">
                <el-input
                    v-model="inputValue"
                    type="textarea"
                    :class="bom_div_input"
                />
            </div>
            <div class="bom_div_send">
                <el-button color="#626aef" :dark="isDark" @click="sendMessageBtn" >发送(S)</el-button>
            </div>
        </div>

    </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import { Edit,Folder } from '@element-plus/icons-vue'
import Bus from '../bus/bus.js';
import defaultImage from '@/assets/avr.png';

    const conversationName = ref("尚");
    const peopleAvatar = ref("");
    const peopleId = ref(null);
    const myAvatar = ref("");
    const currentId = ref(1);
    const inputValue = ref("");
    const isChatShowPeople = ref(true);
    const isChatShowCurr = ref(true);
    const message = ref("");
    const receivedMessage = ref("");
    const socket = ref(null);
    const userInfo = ref(null);
    const token = ref(null);
    const chatInfoList = ref([{
    }]);

    const peopleText=ref("哈哈啊哈");
    const myText=ref("哈哈啊哈");

onMounted(() => {
    userInfo.value  = JSON.parse(getUserInfo());
    token.value = getToken();
})

// 存储token
const initWebSocket = () => {
    const socketUrl = "ws://192.168.110.48:8414/vv/websocket/"+peopleId.value+"/"+token.value;
    console.log('socketUrl',socketUrl);
    socket.value = new WebSocket(socketUrl);
        
    socket.value.onmessage = (event) => {
        console.log("onmessage",event.data);
        peopleText.value = event.data;

        const chatInfo = {
            isChatShowPeople: true,
            isChatShowCurr: false,
            peopleText: event.data,
        }
        chatInfoList.value.push(chatInfo);
    };

    socket.onopen = () => {
        console.log('WebSocket connection established');
        // 在这里设置请求头，例如：设置一个认证token
        this.socket.send(JSON.stringify({ token: 'your-token-here' }));
    };

    socket.value.onclose = () => {
        console.log('WebSocket connection closed');
        // Attempt to reconnect after a delay
    //   setTimeout(this.initWebSocket, 10000);
    };

    socket.value.onerror = (error) => {
        console.error('WebSocket error: ', error);
    };
};

function handleImageError(event) {
  // 将事件目标的src设置为默认图片
  event.target.src = defaultImage;
}

const getUserInfo = () => {
    return localStorage.getItem('userInfo');
};

const getToken = () => {
    return localStorage.getItem('token');
};

Bus.$on('chat_peo',(data)=>{    
    console.log('Received data111:', data);    
    conversationName.value = data.name;
    peopleAvatar.value = data.avatar;
    myAvatar.value = data.myAvatar
    peopleId.value = data.id
    initWebSocket();
})

const sendMessageBtn = () => {
    if(inputValue.value === null) {
        return;
    }
    if("" === inputValue.value) {
        return;
    }
    console.info("inputValue",inputValue.value)
    myText.value = inputValue.value;
    socket.value.send(inputValue.value);


    const chatInfo = {
        isChatShowPeople: false,
        isChatShowCurr: true,
        myText: inputValue.value,
        peopleText: "",
    }
    chatInfoList.value.push(chatInfo);

    inputValue.value = "";
}



</script>

<style scoped>
.main {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.top_div {
    height: 80px;
    display: flex;
    align-items: center;
}
.top_name{
    margin-left: 10px;
    font-size: 20px;
    color: black;
    font-weight: bold;
}
.cent_div {
    margin-bottom: 10PX;
}
.cent_div_scoll {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid Gainsboro;
    /* 纵向滚动，隐藏滚动条 */
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE10+ */
}
.cent_div_item {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}
.bom_div {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 140px;
    border-top: 1px solid Gainsboro;
}
.bom_div_btn {
    margin-top: 10px;
    margin-left: 30px;
}
.bom_image_btn {
    margin-left: 15px;
}
.bom_cut_btn {
    margin-left: 15px;
}

.bom_div_cent {
    flex: 1;
    display: flex;
    margin-left: 20px;
    margin-bottom: 2px;
    margin-right: 20px;
}
.bom_div_send {
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;
    margin-bottom: 8px;
}
.bom_div_input {
    font-size: 18px;
    
}
:deep(.el-textarea__inner:focus) {
  border: none;
  box-shadow: none;
}
:deep(.el-textarea__inner:hover) {
  border: none;
  box-shadow: none;
}
:deep(.el-textarea__inner) {
  border: none;
  box-shadow: none;
  font-size: 18px;
  color: black;
}

:deep(.el-textarea__inner) {
    background-color: #F5F5F5;
}

.cent_div_row {
    background-color: aqua;
    width: 100%;
}
.img_avr {
    width: 40px;
    height: 40px;
}
.chat_content_curr_right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.chat_content_left {
    display: flex;
    flex-direction: row;
    margin-left: 10px;

}
.chat_content_right_text {
    background-color: #95EC69;
    border-radius: 5px;
    margin-right: 8px;
    display: flex; 
    justify-content: center; 
    align-items: center;
    padding-left: 11px;
    padding-right: 11px;
}
.chat_content_left_text {
    background-color: white;
    border-radius: 5px;
    margin-left: 8px;
    display: flex; 
    justify-content: center; 
    align-items: center;
    padding-left: 11px;
    padding-right: 11px;
}
.chat_content_curr_right {
    margin-right: 10px;
}
.img_content {
    height: 100px;
    width: 100px;
    border-radius: 5px;
    margin-left: 8px;
    display: flex; 
}
.img_content_right {
    height: 100px;
    width: 100px;
    border-radius: 5px;
    margin-right: 8px;
    display: flex; 
}
</style>
